<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>打印列表</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<link   type="text/css" rel="stylesheet"  href="./theme/print/css/layui.css">
<script type="text/javascript" src="./theme/js/jquery-1.11.3.min.js"></script>

<script type="text/javascript" src="./theme/print/js/layui.js"></script>
<script type="text/javascript" src="./theme/print/js/layui.all.js"></script>
<style type="text/css">
.width200{ width: 200px}
.width130{width: 130px}
.width90{width: 90px}
#width120{width: 120px;margin-left: 81px;}
.layui-red{color: red}
#dy1-130{width: 130px}
#dy-130{width: 130px}
#width90{width: 90px}
#warp .layui-inline .layui-form-label {
    float: left;
    display: block;
    padding-top: 9px;
    padding-right: 5px;
    padding-left: 0px;
    width: 80px;
    font-weight: 400;
    line-height: 20px;
    text-align: right;
}
.contd { text-align: center;}
.blue{ color: #2190FC}
a:hover{color: red };
  /*分页*/
 .page{ margin-top: 10px; margin-bottom: 10px; overflow: hidden;}.page li{ float: left; }
 .page li a, .page li span{ padding: 5px 10px; background-color: #009688; color: #FFF; margin-right: 5px; display: block;}
 .page li a:hover, .page li span{ background-color: #999;}
</style>

<script>
    //编辑

</script>
</head>
<body>
    <center style="padding-top: 40px">  <a style="font-size: 25px;font-weight: 500">保安员证件--打印列表 </a></center>
        <!-- 数据表格-->
        <div style="width: 90%;padding-top: 20px; margin:0 auto;">
            <!--查询-->
            <form class="layui-form" action="">
              <div class="demoTable">
                <div class="layui-row" >
                    <div class="layui-form-item" id='warp' pane>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="margin-left: -50px;">姓名</label>
                            <div class="layui-input-inline " id='width90'>
                                <input type="text" name="name" lay-verify="" id='width90'  placeholder="请输入姓名" autocomplete="off" class="layui-input width90"
                                 value="<?php echo $name ?>"    >
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">身份证号</label>
                            <div class="layui-input-block" style="margin-left: 86px;">
                                <input type="text" name="identity" lay-verify="" placeholder="请输入身份证" autocomplete="" class="layui-input"  value="<?php echo $identity ?>"  >
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="margin-left: -10px;">打印状态</label>

                            <div class="layui-input-block " id="width120">
                                <select name="stataus" lay-verify="" class='layui-input'>
                                    <option value="3" <?php if($stataus == 3) {echo 'selected';}?>>全部</option>
                                    <option value="0" <?php if($stataus == 0) {echo 'selected';}?>>未打印</option>
                                    <option value="1" <?php if($stataus == 1) {echo 'selected';}?>>已打印</option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" >导入时间</label>
                            <div class="layui-input-inline " id="dy1-130" >
                                <input type="text" name="crtime" id="date" lay-verify="" placeholder="" autocomplete="off" class="layui-input"  value="<?php echo $crtime ?>" >
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label " style="margin-left: -25px;">打印时间</label>
                            <div class="layui-input-inline"  id='dy-130'>
                                <input type="text" name="uptime" id="date1" lay-verify="" placeholder="" autocomplete="off" class="layui-input"  value="<?php echo $uptime ?>" >
                            </div>
                        </div>
                    </div>
                    <div class="layui-inline">
                      <button class="layui-btn layui-btn-normal" data-type="reload" lay-submit lay-filter="formDemo">

                             <i class="layui-icon" >&#xe615;</i> 查询
                      </button>
                      <!-- <button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
                      <button type="button" class="layui-btn layui-btn-normal" id="uploadfile">
                             <i class="layui-icon" >&#xe608;</i> 导入文件
                      </button>
                    </div>
                  </div>
                </div>
            </form>

            <!--以下为两个必须div元素-->
            <!-- 数据表格-->
            <table class="layui-hide" id="LAY_table_user" lay-filter="user"></table>
            <script type="text/html" id="barDemo">
              <a class="blue" lay-event="detail">打印</a>
              <a class="blue" lay-event="edit">编辑</a>
              <a class="layui-red" lay-event="del">删除</a>
            </script>

        </div>


<script type="text/javascript">

     layui.use(['form', 'layedit', 'laydate','laytpl','table'], function(){
            var form = layui.form,
                  layer = layui.layer,
                  layedit = layui.layedit,
                  laytpl = layui.laytpl,
                  table = layui.table,
                   upload = layui.upload, //上传
                  laydate = layui.laydate;
                   form.render();
                  //执行一个laydate实例
              laydate.render({
                elem: '#date' //指定元素
              });
              laydate.render({
                elem: '#date1' //指定元素
              });

//方法级渲染
  table.render({
    elem: '#LAY_table_user',
    //,url: 'baoan-get_baoan2'
    //,cellMinWidth: 80
    size: 'sm'
    ,cols: [[ //标题栏
      {field: 'id', title: 'ID',width:50, }
      ,{field: 'name', title: '用户名',width:85}
      ,{field: 'sfz', title: '身份证号'}
      ,{field: 'bday', title: '出生年月',width:125}
      ,{field: 'address', title: '地址'}
      ,{field: 'fadate', title: '发证日期',width:95}
      ,{field: 'papers', title: '保安员证编号'}
      ,{field: 'crtime', title: '导入时间',width:95}
      ,{field: 'uptime', title: '打印时间',width:95}
      ,{field: 'status', title: '状态', width:90}
      ,{field: 'cz', title: '操作', width:120, align:'center', toolbar: '#barDemo'}
    ]]
    ,data:<?php echo $tabledata?>
    ,id: 'testReload'
    ,page: true
    ,height: 500
  });
 //监听行操作
  table.on('tool(user)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data,//获得当前行数据
    layEvent = obj.event; //获得 lay-event 对应的值
    var id= data.id;
    if(layEvent === 'detail'){
     // layer.msg('打印操作');

        window.open('./baoan-print_baoan?id='+id);
    } else if(layEvent === 'del'){
      layer.confirm('真的删除行么', function(index){
        obj.del(); //删除对应行（tr）的DOM结构
        layer.close(index);
        //向服务端发送删除指令
        $.ajax({
                  type:"post",
                  url: 'baoan-deluser',
                  data:data,
                  dataType:'html',
                  success:function(data){
                    layer.msg('删除成功');
                }
        })
      });
    } else if(layEvent === 'edit'){
      //layer.msg('编辑操作');
        $.ajax({
              type:"post",
              url: 'baoan-editor',
              data:data,
              dataType:'html',
              success:function(data){
                layer.open({
                    type: 1,
                    title: '编辑',
                    area: ['900px', '420px'],
                    shade: 0.3,
                    shadeClose: true,
                    offset: '20px',
                    maxmin: false,
                    content: data,
                    success:function(){
                      //  layer.closeAll('loading'); //关闭加载层
                        //layer.close(index);
                  }
                });
              }
        })

     }
  });


  //刷新
  var $ = layui.$, active = {
    reload: function(){
     var name = $("input[name='name']").val();
     var identity = $("input[name='identity']").val();
     var stataus = $("input[name='stataus']").val();
     var crtime = $("input[name='crtime']").val();
     var uptime = $("input[name='uptime']").val();

      //执行重载
      table.reload('testReload', {
       // url: 'baoan-get_baoan1',
        //method: 'post',
        page: {
          curr: 1 //重新从第 1 页开始
        }
        ,where: {
              name: 'name',
              identity: 'identity',
              stataus: 'stataus',
              crtime: 'crtime',
              uptime: 'uptime'
        }
      }, 'data');
    }
  };

  $('.demoTable .layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });


  $('.demoTable .layui-inline #uploadfile').on('click', function(){

        layer.open({
                resize: false,
                title: '导入人员名单',
                shadeClose: true,
                area:['900px', '420px'],
                type: 2,
                content: ['baoan-file_upload', 'no'] ,
                success: function (layero, index) {

                      //layer.closeAll(); //关闭加载层
                }
            });
  });
    /* //指定允许上传的文件类型
      upload.render({
        elem: '#uploadfile'
        ,url: 'baoan-file_upload'
        ,accept: 'file' //普通文件
        ,done: function(res){
          console.log(res)
        }
      });*/
});
</script>

</body>
</html>